﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>角色管理</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <link href="../../scripts/honeySwitch/honeySwitch.css" type="text/css" rel="stylesheet"/>
    <script src="../../scripts/honeySwitch/honeySwitch.js"></script>
</head>
<body>
<div class="mini-splitter" style="width:100%;height:100%;">
    <div size="45%" showCollapseButton="false">
        <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" plain="true" onclick="openAddDialog()">增加</a>
                        <a class="mini-button" iconCls="icon-edit" plain="true" onclick="openEditDialog()">编辑</a>
                        <a class="mini-button" iconCls="icon-remove" plain="true" onclick="deleteRole()">删除</a>
                    </td>
                    <td style="white-space:nowrap;">
                        <label for="keywords">关键词: </label>
                        <input id="keywords" class="mini-textbox" emptyText="ID,名称"
                               style="width:180px;" onenter="onKeyEnter"/>
                        <a class="mini-button" onclick="search()">查询</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="mini-fit">
            <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
                 ajaxType="get" idField="id" onload="onLoadError"
                 sizeList="[5,10,20,50,100]" pageSize="20" selectOnLoad="true" onselectionchanged="onSelectionChanged"
                 dataField="data.records" totalField="data.total">
                <div property="columns">
                    <div field="id" width="20" headerAlign="center" align="center">ID</div>
                    <div field="name" width="80" headerAlign="center" align="center">角色名称</div>
                    <div field="typeDesc" width="60" headerAlign="center" align="center">角色类型</div>
                    <div field="status" width="50" headerAlign="center" renderer="onStatusRenderer" align="center">
                        状态
                    </div>
                    <div field="createTime" width="80" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss"
                         align="center">
                        创建日期
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div showCollapseButton="false">
        <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">
            <label for="role-name-text">当前角色: </label>
            <span id="role-name-text" style="padding-left:5px;font-weight: bold;"></span>
            <span class="separator"></span>
            <a class="mini-button" iconCls="icon-save" plain="true" onclick="saveRoleMenuData()">更新权限菜单</a>
        </div>
        <div class="mini-fit">
            <ul id="tree1" class="mini-tree" style="width:100%;"
                showTreeIcon="true" ajaxType="get" onload="onLoadError"
                textField="name" idField="id" dataField="data"
                showCheckBox="true" resultAsTree="true" expandOnLoad="true">
            </ul>
        </div>
    </div>
</div>

<div id="add-role-dialog" class="mini-window" title="添加角色" style="width:380px;"
     showModal="true" allowDrag="true">
    <div id="add-form" class="form">
        <input class="mini-hidden" name="id"/>
        <input labelField="true" label="名称：" name="name" class="mini-textbox" required="true"
               requiredErrorText="名称不能为空"/>
        <input labelField="true" label="类型：" id="add-type-combo" name="type" class="mini-combobox" data="RoleType"
               valueField="id" textField="text" required="true" minLengthErrorText="类型不能为空"/>
        <div class="form-switch">
            <label>状态：</label>
            <span name="form-status-sw" class="switch-on" themeColor="#6d9eeb" style="zoom:0.45;">
                <input class="mini-hidden" name="status" value="true">
            </span>
        </div>

        <div class="form-btn-div">
            <a class="mini-button btn" iconCls="icon-ok" onclick="addOrEditMenu()">保存</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    let Status = [{id: true, text: '正常'}, {id: false, text: '禁用'}];
    let RoleType = [{id: 0, text: '超级管理员'}, {id: 1, text: '普通管理员'}, {id: 2, text: '演示管理员'}];


    mini.parse();

    let header = {Authorization: $.cookie(TOKEN_KEY)};

    // 表格
    let grid = mini.get("datagrid1");
    grid.setUrl(`${SYS_API_PREFIX}/auth/role/list`);
    grid.setAjaxOptions({
        headers: header
    });
    grid.load();
    //表格渲染完毕后渲染开关控件
    grid.on("update", function (e) {
        // 开关控件初始化
        switchInitForGrid("role", grid);
    });

    // 搜索
    function search() {
        let keywords = mini.get("keywords").getValue();
        let status = mini.get("status-combo").getValue();
        let roleTypeCombo = mini.get("role-type-combo");
        let roleType = roleTypeCombo.getValue();
        grid.load({keywords: keywords, status: status, type: roleType});
    }

    // 回车搜索
    function onKeyEnter(e) {
        search();
    }

    let tree = mini.get("tree1");
    tree.setAjaxOptions({
        headers: header
    });
    tree.load(`${SYS_API_PREFIX}/auth/menu/simlist`);


    function onSelectionChanged() {
        let row = grid.getSelected();
        // console.log("row", row);
        if (row) {
            $("#role-name-text").text(row.name);
            let url = `${SYS_API_PREFIX}/auth/role/menuIds?roleId=${row.id}`;
            ajaxRequest(url, METHOD.GET, null, null, function (res) {
                tree.setValue(res.data);
            });
        }
    }


    function openAddDialog() {
        let form = new mini.Form("#add-form");
        form.reset();
        setSwitch("#add-role-dialog span[name='form-status-sw']", true);
        showMenuDialog("添加角色");
    }

    function showMenuDialog(title) {
        let dialog = mini.get("add-role-dialog");
        dialog.setTitle(title);
        dialog.show();
    }

    function openEditDialog() {
        let row = grid.getSelected();
        if (!row) {
            alertWarn("请选择要编辑的行");
            return;
        }

        setSwitch("#add-role-dialog span[name='form-status-sw']", row.status);

        let form = new mini.Form("#add-form");
        form.setData(row);
        showMenuDialog("编辑角色");
    }


    function addOrEditMenu() {
        let title = mini.get("add-role-dialog").getTitle();
        if (title === "添加角色") {
            addMenu();
        } else {
            editRole();
        }
    }

    function addMenu() {
        let form = new mini.Form("#add-form");
        if (form.validate()) {
            let url = `${SYS_API_PREFIX}/auth/role/add`;
            let data = mini.encode(form.getData());
            ajaxRequest(url, METHOD.POST, data, CONTENT_TYPE_JSON, function (res) {
                showTipsSuccess("添加成功!");
                mini.get("add-role-dialog").hide();
                grid.reload();
            });
        }
    }

    function editRole() {
        let form = new mini.Form("#add-form");
        if (form.validate()) {
            let url = `${SYS_API_PREFIX}/auth/role/edit`;
            let data = mini.encode(form.getData());
            ajaxRequest(url, METHOD.PUT, data, CONTENT_TYPE_JSON, function (res) {
                showTipsSuccess("修改成功!");
                mini.get("add-role-dialog").hide();
                grid.reload()
            });
        }
    }

    function deleteRole() {
        let row = grid.getSelected();
        if (!row) {
            mini.alert("请选择一条记录");
            return;
        }
        mini.confirm("确定要删除该记录吗？", "确定？", function (action) {
            if (action === "ok") {
                let url = `${SYS_API_PREFIX}/auth/role/delete?id=${row.id}`;
                ajaxRequest(url, METHOD.DELETE, null, null, function (res) {
                    showTipsSuccess("删除成功!");
                    grid.reload()
                });
            }
        });
    }

    function saveRoleMenuData(){
        let row = grid.getSelected();
        if (!row) {
            alertWarn("请先选择角色");
            return;
        }
        let menuIds = tree.getValue(true);
        if (menuIds.length === 0) {
            alertWarn("请勾选权限菜单");
            return;
        }
        let url = `${SYS_API_PREFIX}/auth/role/modifyMenu`;
        let data = {
            id: row.id,
            menuIds: menuIds
        };
        data = mini.encode(data);
        ajaxRequest(url, METHOD.PUT, data, CONTENT_TYPE_JSON, function (res) {
            showTipsSuccess("保存成功!");
        });
    }



    $(function () {
        switchInitForForm();
    });

</script>
</body>
</html>